<template>
  <div class="dashboard-container">
    <h2>管理员控制台</h2>
    
    <div class="dashboard-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>用户管理</span>
              </div>
            </template>
            <div class="card-body">
              <div class="card-icon">
                <el-icon :size="32"><user /></el-icon>
              </div>
              <div class="card-action">
                <router-link to="/admin/users">
                  <el-button type="primary">查看用户</el-button>
                </router-link>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>卖家申请</span>
              </div>
            </template>
            <div class="card-body">
              <div class="card-icon">
                <el-icon :size="32"><shop /></el-icon>
              </div>
              <div class="card-action">
                <router-link to="/admin/seller-applications">
                  <el-button type="primary">处理申请</el-button>
                </router-link>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>分类管理</span>
              </div>
            </template>
            <div class="card-body">
              <div class="card-icon">
                <el-icon :size="32"><folder /></el-icon>
              </div>
              <div class="card-action">
                <router-link to="/admin/categories">
                  <el-button type="primary">管理分类</el-button>
                </router-link>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>拍卖管理</span>
              </div>
            </template>
            <div class="card-body">
              <div class="card-icon">
                <el-icon :size="32"><goods /></el-icon>
              </div>
              <div class="card-action">
                <router-link to="/admin/auctions">
                  <el-button type="primary">管理拍卖</el-button>
                </router-link>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <div class="welcome-message">
      <h3>欢迎回来，{{ adminName }}</h3>
      <p>管理员后台可以对在线拍卖系统进行全面管理和监控</p>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useAdminStore } from '@/stores/admin'

const adminStore = useAdminStore()
const adminName = computed(() => adminStore.userName || '管理员')
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.dashboard-cards {
  margin-top: 20px;
  margin-bottom: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.card-icon {
  margin-bottom: 20px;
  color: #409EFF;
}

.welcome-message {
  margin-top: 40px;
  padding: 20px;
  background-color: #f2f6fc;
  border-radius: 8px;
}

.welcome-message h3 {
  margin-top: 0;
  color: #409EFF;
}
</style> 